<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <a-input-search
          allowClear
          v-model:value="pageSet.name"
          placeholder="请输入等级名称"
          enter-button
          @search="loadPagination(true)"
          style="width: 300px"
        />
        <div
          class="commonBtn-primary"
          @click="addFormData(1)"
          style="min-width: 60px"
        >
          新建
        </div>
      </div>

      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '操作'">
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="compile(1, record.id)"
              >编辑</span
            >
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="compile(2, record.id)"
              >&nbsp;&nbsp;删除</span
            >
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="compile(3, record.id)"
              >&nbsp;&nbsp;折扣设置</span
            >
          </template>
          <template v-if="column.title == '是否永久'">
            <a-tag color="processing" v-if="text == 1">是</a-tag>
            <a-tag color="error" v-else>否</a-tag>
          </template>
          <template v-if="column.title == '是否显示'">
            <a-tag color="processing" v-if="text == 1">是</a-tag>
            <a-tag color="error" v-else>否</a-tag>
          </template>
          <template v-if="column.title == '等级图标'">
            <div
              class="pointer"
              v-if="text"
              @click="
                () => {
                  setVisible(true, index);
                }
              "
            >
              <img :src="text" alt="" style="height: 30px" />
              <a-image
                :width="0"
                :style="{display: 'none'}"
                :preview="{
                  visible: visibleImg[index],
                  onVisibleChange: (e) => {
                    setVisible(e, index);
                  }
                }"
                :src="text"
              />
            </div>
          </template>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <a-modal
        v-model:open="visible"
        width="800px"
        :title="title"
        :footer="null"
        :maskClosable="false"
        :destroyOnClose="true"
        @cancel="addFormData(2)"
      >
        <div v-global-loading="modalloading">
          <a-form :labelCol="{span: 7}" :model="form" ref="formRef">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="等级名称"
                  name="name"
                  v-if="!discount"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input v-model:value="form.name" />
                </a-form-item>
                <a-form-item
                  label="享受折扣%"
                  name="discount"
                  v-if="!form.id"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input-number
                    v-model:value="form.discount"
                    style="width: 100%; position: relative"
                    :min="0"
                    :max="100"
                    :controls="false"
                  >
                    <template #addonBefore>
                      <div
                        class="pointer add"
                        @click="addNumber('discount', '-')"
                      >
                        -
                      </div>
                    </template>
                    <template #addonAfter>
                      <div
                        class="pointer add"
                        @click="addNumber('discount', '+')"
                      >
                        +
                      </div>
                    </template>
                  </a-input-number>
                </a-form-item>
                <a-form-item label="会员等级" name="lv" v-if="!discount">
                  <a-input-number
                    v-model:value="form.lv"
                    style="width: 100%; position: relative"
                    :controls="false"
                  >
                    <template #addonBefore>
                      <div class="pointer add" @click="addNumber('lv', '-')">
                        -
                      </div>
                    </template>
                    <template #addonAfter>
                      <div class="pointer add" @click="addNumber('lv', '+')">
                        +
                      </div>
                    </template>
                  </a-input-number>
                </a-form-item>
                <!-- <a-form-item label="会员图标" name="icon" v-if="!discount">
                  <div class="upload" @click="upload('icon')" v-if="!form.icon">
                    <plus-outlined style="font-size: 30px; color: #999" />
                  </div>
                  <div
                    style="width: 120px; height: 120px; cursor: pointer"
                    v-else
                    @click="upload('icon')"
                  >
                    <img :src="form.icon" style="width: 120px" />
                  </div>
                </a-form-item> -->
                <a-form-item
                  label="是否指定全商品"
                  name="isAllProduct"
                  :labelCol="{span: 9}"
                  v-if="!form.id && form.isAllProductType === false"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-radio-group
                    v-model:value="form.isAllProduct"
                    name="isAllProduct"
                  >
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="商品分类"
                  name="productTypeLevelPaths"
                  v-if="form.isAllProductType === true && !form.id"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-tree-select
                    v-model:value="form.productTypeLevelPaths"
                    show-search
                    style="width: 100%"
                    :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
                    allow-clear
                    tree-checkable
                    :show-checked-strategy="SHOW_PARENT"
                    :tree-data="treeData"
                    tree-node-filter-prop="name"
                    :fieldNames="{value: 'levelPath', label: 'name'}"
                    @change="formattingList"
                    :treeCheckStrictly="true"
                  >
                    <!-- @change="changeTree" -->
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="有效时间(天)"
                  name="expDay"
                  v-if="!discount"
                >
                  <a-input-number
                    v-model:value="form.expDay"
                    style="width: 100%; position: relative"
                    :controls="false"
                  >
                    <template #addonBefore>
                      <div
                        class="pointer add"
                        @click="addNumber('expDay', '-')"
                      >
                        -
                      </div>
                    </template>
                    <template #addonAfter>
                      <div
                        class="pointer add"
                        @click="addNumber('expDay', '+')"
                        style=""
                      >
                        +
                      </div>
                    </template>
                  </a-input-number>
                </a-form-item>
                <a-form-item
                  label="是否永久"
                  name="isPermanent"
                  v-if="!discount"
                >
                  <a-radio-group
                    v-model:value="form.isPermanent"
                    name="isPermanent"
                  >
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <!-- <a-form-item label="是否显示" name="isDisplay" v-if="!discount">
                  <a-radio-group
                    v-model:value="form.isDisplay"
                    name="isDisplay"
                  >
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item> -->
                <!-- <a-form-item
                  label="会员背景"
                  name="background"
                  v-if="!discount"
                >
                  <div
                    class="upload"
                    @click="upload('background')"
                    v-if="!form.background"
                  >
                    <plus-outlined style="font-size: 30px; color: #999" />
                  </div>
                  <div
                    style="width: 120px; height: 120px; cursor: pointer"
                    v-else
                    @click="upload('background')"
                  >
                    <img :src="form.background" style="width: 120px" />
                  </div>
                </a-form-item> -->
                <a-form-item
                  label="指定类型"
                  name="isAllProductType"
                  :rules="[{required: true, message: '请填写'}]"
                  v-if="!form.id"
                >
                  <a-radio-group
                    v-model:value="form.isAllProductType"
                    name="isAllProductType"
                  >
                    <a-radio :value="true">商品分类</a-radio>
                    <a-radio :value="false">商品</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item
              :labelCol="{span: 3}"
              label="设置折扣"
              v-if="form.isAllProductType === true && !form.id"
            >
              <UserGradeDeal v-model:list="classification"></UserGradeDeal>
            </a-form-item>

            <a-form-item
              label="说明"
              name="remark"
              :labelCol="{span: 3}"
              v-if="!discount"
            >
              <a-textarea v-model:value="form.remark" :rows="2" />
            </a-form-item>
            <UserGradeChoose
              v-model:list="chooseList"
              v-if="
                form.isAllProduct === false &&
                form.isAllProductType === false &&
                !form.id
              "
            >
            </UserGradeChoose>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="addFormData(2)"
              >取消</a-button
            >
            <a-button type="primary" @click="addFormData(3)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <a-modal
        v-model:open="visible2"
        width="800px"
        :title="title"
        :footer="null"
        :maskClosable="false"
        :destroyOnClose="true"
        @cancel="addFormData(2)"
      >
        <div v-global-loading="modalloading">
          <a-form :labelCol="{span: 7}" :model="form" ref="formRef">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="享受折扣%"
                  name="discount"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input-number
                    v-model:value="form.discount"
                    style="width: 100%; position: relative"
                    :min="0"
                    :max="100"
                    :controls="false"
                  >
                    <template #addonBefore>
                      <div
                        class="pointer add"
                        @click="addNumber('discount', '-')"
                      >
                        -
                      </div>
                    </template>
                    <template #addonAfter>
                      <div
                        class="pointer add"
                        @click="addNumber('discount', '+')"
                      >
                        +
                      </div>
                    </template>
                  </a-input-number>
                </a-form-item>
                <a-form-item
                  label="是否指定全商品"
                  name="isAllProduct"
                  :labelCol="{span: 9}"
                  v-if="form.isAllProductType === false"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-radio-group
                    v-model:value="form.isAllProduct"
                    name="isAllProduct"
                  >
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="商品分类"
                  name="productTypeLevelPaths"
                  v-if="form.isAllProductType === true"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-tree-select
                    v-model:value="form.productTypeLevelPaths"
                    show-search
                    style="width: 100%"
                    :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
                    allow-clear
                    tree-checkable
                    :show-checked-strategy="SHOW_PARENT"
                    :tree-data="treeData"
                    tree-node-filter-prop="name"
                    :fieldNames="{value: 'levelPath', label: 'name'}"
                    @change="formattingList"
                    :treeCheckStrictly="true"
                  ></a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="指定类型"
                  name="isAllProductType"
                  :rules="[{required: true, message: '请填写'}]"
                  v-if="discount || !form.id"
                >
                  <a-radio-group
                    v-model:value="form.isAllProductType"
                    name="isAllProductType"
                  >
                    <a-radio :value="true">商品分类</a-radio>
                    <a-radio :value="false">商品</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item
              :labelCol="{span: 3}"
              label="设置折扣"
              v-if="form.isAllProductType === true"
            >
              <UserGradeDeal v-model:list="classification"></UserGradeDeal>
            </a-form-item>
            <UserGradeChoose
              v-model:list="chooseList"
              v-if="
                form.isAllProduct === false && form.isAllProductType === false
              "
            >
            </UserGradeChoose>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="addFormData(2)"
              >取消</a-button
            >
            <a-button type="primary" @click="addFormData(3)">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, inject, onActivated, onMounted, watch, nextTick} from "vue";
import {trigerUpload, trigerUploadObs} from "@/utils/common";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {message, Modal} from "ant-design-vue";
import {exportExcel} from "@/utils/exportFile";
import UserGradeChoose from "@/components/functional/userGradeChoose.vue";
import {TreeSelect} from "ant-design-vue";
import UserGradeDeal from "@/components/functional/userGradeDeal.vue";
import {
  userLevelPage,
  userLevelCreate,
  userLevelUpdate,
  userLevelUpdateDiscount,
  userLevelDelete,
  userLevelDetail,
  userLevelList
} from "@/api/customerArchives/userGrade";
import {productTypeList} from "@/api/merchandise/classification";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const calcCanUseHeight: any = inject("calcCanUseHeight");
const isAddNew = ref(false);
const filterOption = (input: string, option: any) => {
  return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const classification = ref([]);
//选择商品的ID集合
const chooseList = ref([]);
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
const treeData = ref<Array<any>>([]);
const gettreeData = () => {
  productTypeList().then((res) => {
    treeData.value = res.data;
  });
};
gettreeData();
//是否是折扣设置
const discount = ref<boolean>(false);
const tableLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const modalloading = ref<boolean>(false);
const form = ref<any>({});
const formRef = ref<any>();
const title = ref<string>("新建");
const visible = ref<boolean>(false);
const visible2 = ref<boolean>(false);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
watch(visible, (e) => {
  if (e) {
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }
});
watch(visible2, (e) => {
  if (e) {
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }
});
const visibleImg = ref<any>([]);
const setVisible = (flag, index) => {
  visibleImg.value[index] = flag;
};
//获取数据
const loadPagination = (flag?: boolean): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  userLevelPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination();
//重置
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination(true);
};
//新建
const addFormData = (type: number): void => {
  if (type == 1) {
    //新建弹框
    form.value = {
      isAllProductType: true,
      isDisplay: true,
      isPermanent: true,
      productTypeLevelPathsHistory: []
    };
    discount.value = false;
    visible.value = true;
    title.value = "新建用户等级";
    chooseList.value = [];
    classification.value = [];
  } else if (type == 2) {
    //取消
    formRef.value.clearValidate();
    visible.value = false;
    visible2.value = false;
  } else if (type == 3) {
    if (discount.value) {
      modalloading.value = true;
      let formData = JSON.parse(JSON.stringify(form.value));
      formData.productIds = chooseList.value;
      formData.productTypes = JSON.parse(JSON.stringify(classification.value));
      userLevelUpdateDiscount(formData)
        .then((res) => {
          message.success("设置成功");
          visible2.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else {
      formRef.value.validate().then(() => {
        modalloading.value = true;
        let formData = JSON.parse(JSON.stringify(form.value));
        formData.productIds = chooseList.value;
        formData.productTypes = JSON.parse(
          JSON.stringify(classification.value)
        );
        if (formData.id) {
          userLevelUpdate(formData)
            .then((res) => {
              message.success("修改成功");
              visible.value = false;
              loadPagination();
            })
            .finally(() => {
              modalloading.value = false;
            });
        } else {
          userLevelCreate(formData)
            .then((res) => {
              message.success("创建成功");
              visible.value = false;
              loadPagination();
            })
            .finally(() => {
              modalloading.value = false;
            });
        }
      });
    }
  }
};
//编辑 删除 折扣
const compile = (type: number, id: number): void => {
  if (type == 1) {
    loading.value = true;
    title.value = "详情";
    userLevelDetail({id})
      .then((res) => {
        form.value = res.data;
        discount.value = false;
        visible.value = true;
        chooseList.value = form.value.productIds || [];
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 2) {
    Modal.confirm({
      title: "确定要删除该数据嘛",
      onOk() {
        loading.value = true;
        userLevelDelete({id})
          .then((res) => {
            message.success("删除成功!");
            loadPagination(true);
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 3) {
    loading.value = true;
    title.value = "折扣设置";
    userLevelDetail({id})
      .then((res) => {
        form.value = res.data;
        form.value.productTypeLevelPaths = form.value.productTypes.map(
          (item) => {
            return {
              label: item.productTypeName,
              value: item.productTypeLevelPath
            };
          }
        );
        form.value.productTypeLevelPathsHistory = JSON.parse(
          JSON.stringify(form.value.productTypeLevelPaths)
        );
        formattingList(form.value.productTypeLevelPaths, true);
        discount.value = true;
        visible2.value = true;
        chooseList.value = form.value.productIds || [];
        classification.value = form.value.productTypes || [];
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
const addNumber = (name: string, type: string) => {
  let num = Number(form.value[name]) || 0;
  if (type == "+") {
    num++;
  } else {
    if (num == 0) {
      message.error("最小为0");
    } else {
      num--;
    }
  }
  form.value[name] = num;
};
const tableData = ref<Array<object>>([]);
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "等级名称",
    dataIndex: "name",
    align: "center",
    width: 180
  },
  // {
  //   title: "等级图标",
  //   dataIndex: "icon",
  //   align: "center",
  //   width: 120
  // },
  {
    title: "会员等级",
    dataIndex: "lv",
    align: "center",
    width: 120
  },
  {
    title: "享受折扣(%)",
    dataIndex: "discount",
    align: "center",
    width: 120
    // customRender: ({text}) => {
    //   return text+'%'
    // },
  },
  {
    title: "有效时间(天)",
    dataIndex: "expDay",
    align: "center",
    width: 120
    // customRender: ({text}) => {
    //   return text+'天'
    // },
  },
  {
    title: "是否永久",
    dataIndex: "isPermanent",
    align: "center",
    width: 100
  },
  {
    title: "是否显示",
    dataIndex: "isDisplay",
    align: "center",
    width: 100
  },
  {
    title: "操作",
    dataIndex: "caozuo",
    align: "center",
    width: 140,
    fixed: "right"
  }
]);
const upload = (name: string): void => {
  trigerUpload().then((res: any) => {
    let files = res.target.files[0];
    if (
      files.type == "image/jpeg" ||
      files.type == "image/png" ||
      files.type == "image/jpg"
    ) {
      modalloading.value = true;
      trigerUploadObs(res)
        .then((data) => {
          form.value[name] = data;
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else {
      message.error("请上传jpeg、png、jpg类型的图片");
    }
  });
};
//格式化集合
const formattingList = (ids: Array<object> = [], flag = false) => {
  //子集不影响父级  父级影响子集时得操作
  //表格数据当前
  let a: any = [];
  //下拉框选中ID
  let selectID: any = [];
  ids.forEach((item: any) => {
    let list = item.value.split(",");
    //当前操作得数据
    let data = findNodeByPath(treeData.value, list);
    let flag = true;
    selectID.forEach((v) => {
      if (v.value == data.levelPath) {
        flag = false;
      }
    });
    if (flag) {
      selectID.push({value: data.levelPath, label: data.name});
    }
    //有子集将子集添加
    const go = (arr) => {
      arr.forEach((v) => {
        let flag = true;
        selectID.forEach((e) => {
          if (e.value == v.levelPath) {
            flag = false;
          }
        });
        if (flag) {
          selectID.push({value: v.levelPath, label: v.name});
        }
        if (v.children) {
          go(v.children);
        }
      });
    };

    if (data.children) {
      go(data.children);
    }
  });
  //如果现在的数量小于之前的数量 判断里面有没有被删除的数据的子集  有也一并删除
  if (
    form.value.productTypeLevelPaths.length <
    form.value.productTypeLevelPathsHistory.length
  ) {
    let data = {}; //删除的元素
    if (
      form.value.productTypeLevelPathsHistory.length &&
      form.value.productTypeLevelPaths.length
    ) {
      for (const item of form.value.productTypeLevelPathsHistory) {
        let flag = false;
        for (const v of form.value.productTypeLevelPaths) {
          if (item.value == v.value) {
            flag = true;
          }
        }
        if (!flag) {
          data = item;
          break;
        }
      }
    }
    let selectIDNew = [];
    if (data.value) {
      selectID.forEach((item) => {
        let idList = data.value.split(",");
        if (idList.length > 1) {
          let id = item.value.split(",");
          let flag1 = false;
          let flag2 = false;
          if (!idList.includes(id[id.length - 1])) {
            flag1 = true;
          }
          if (item.value.indexOf(data.value) < 0) {
            flag2 = true;
          }
          if (flag2 && flag1) {
            selectIDNew.push(item);
          }
        } else if (item.value.indexOf(data.value) < 0) {
          selectIDNew.push(item);
        }
      });
    }
    form.value.productTypeLevelPaths = selectIDNew;
    form.value.productTypeLevelPathsHistory = JSON.parse(
      JSON.stringify(form.value.productTypeLevelPaths)
    );
  } else {
    form.value.productTypeLevelPaths = selectID;
    form.value.productTypeLevelPathsHistory = JSON.parse(
      JSON.stringify(form.value.productTypeLevelPaths)
    );
  }
  //判断表格集合里面是否有他的父级
  if (!flag) {
    form.value.productTypeLevelPaths.forEach((item) => {
      let list = item.value.split(",");
      let data = findNodeByPath(treeData.value, list);
      a.push({
        productTypeId: data.id,
        productTypeName: data.name,
        productTypeLevelPath: data.levelPath,
        productTypeDiscount: 0
      });
    });
    let b: any = [];
    a.forEach((item) => {
      let levellist = item.productTypeLevelPath.split(",");
      if (levellist.length > 1) {
        //父级得路径ID
        levellist.splice(levellist.length - 1, 1);
        let flag = true;
        a.forEach((v) => {
          if (v.productTypeLevelPath == levellist.join(",")) {
            flag = false;
          }
        });
        if (flag) {
          b.push(item);
        }
      } else {
        b.push(item);
      }
    });
    classification.value.forEach((item) => {
      b.forEach((v) => {
        if (item.productTypeLevelPath == v.productTypeLevelPath) {
          v.productTypeDiscount = item.productTypeDiscount || 0;
        }
      });
    });
    classification.value = b;
  }
  //父子集关联时得操作
  // let a: any = [];
  // ids.forEach((item: any, index: number) => {
  //   let list = item.split(",");
  //   let obj: any = {};
  //   obj.productTypeId = list[list.length - 1];
  //   obj.productTypeName = label[index];
  //   obj.productTypeLevelPath = item;
  //   obj.productTypeDiscount = 0;
  //   a.push(obj);
  // });
  // classification.value = a;
};
function findNodeByPath(list, path) {
  if (!path || path.length === 0) {
    return null;
  }
  for (let i = 0; i < list.length; i++) {
    const node = list[i];
    if (node.id === path[0]) {
      if (path.length === 1) {
        return node;
      }
      const result = findNodeByPath(node.children, path.slice(1));
      if (result) {
        return result;
      }
    }
  }

  return null;
}
</script>

<style lang="less" scoped>
.add {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
}

.upload {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  border: 1px dashed #999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
